<template>

    <header-component />
    <div class="order-container">
    <div class="BackLink">
      <router-link to="/main">← Return to Main Menu</router-link>
    </div>

    <h2>My Orders</h2>

    <table class="order-table">
      <thead>
        <tr>
          <th>Order ID</th>
          <th>Date</th>
          <th>Total Price</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="isLoading">
          <td colspan="3">Loading orders...</td>
        </tr>
        <tr v-else-if="!orders.length">
          <td colspan="3" class="empty-orders">No orders found.</td>
        </tr>
        <tr v-else v-for="order in orders" :key="order.orderId">
          <td>
            <router-link :to="`/orders/${order.orderId}`">{{ order.orderId }}</router-link>
          </td>
          <td>{{ formatDate(order.orderDate) }}</td>
          <td>{{ formatCurrency(order.totalPrice) }}</td>
        </tr>
      </tbody>
    </table>

    <p v-if="error" style="color: red;">{{ error }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import HeaderComponent from '@/components/Header.vue'
import axios from 'axios'

export default {
  name: 'OrderList',
  components: {
    HeaderComponent
  },
  setup() {
    const orders = ref([])
    const isLoading = ref(false)
    const error = ref(null)

    const fetchOrders = async () => {
      try {
        isLoading.value = true
        const userId = localStorage.getItem('username')|| 'ddd'  // 默认测试用户名
        const response = await axios.get(`/api/orders/user/${userId}`)
        if (response.data.status === 0) {
          orders.value = response.data.data
        } else {
          error.value = 'Failed to load orders'
        }
      } catch (err) {
        error.value = err.message || 'Network error'
        console.error('Error fetching orders:', err)
      } finally {
        isLoading.value = false
      }
    }

    const formatDate = (dateString) => {
      const options = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }
      return new Date(dateString).toLocaleString('en-US', options)
    }

    const formatCurrency = (amount) => {
      return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
      }).format(amount)
    }

    onMounted(() => {
      fetchOrders()
    })

    return {
      orders,
      isLoading,
      error,
      formatDate,
      formatCurrency
    }
  }
}
</script>

<style scoped>
.order-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

th {
  background-color: #f8f9fa;
  padding: 12px;
  text-align: left;
  border-bottom: 2px solid #dee2e6;
}

td {
  padding: 12px;
  border-bottom: 1px solid #dee2e6;
}

.empty-orders {
  text-align: center;
  color: #6c757d;
  padding: 20px;
}

.BackLink {
  text-align: left;
  margin-left: 0;
  padding-left: 0;
}


a:hover {
  text-decoration: underline;
}
</style>